.icon {
  position: absolute; }
  .icon:before, .icon:after {
    content: '';
    position: absolute;
    display: block; }
  .icon i {
    position: absolute; }
    .icon i:before, .icon i:after {
      content: '';
      position: absolute;
      display: block; }

.cmd.icon {
  margin-left: 8px;
  margin-top: 8px;
  width: 3px;
  height: 3px;
  border: solid 1px #333333; }
  .cmd.icon:before {
    left: -6px;
    top: -6px;
    width: 4px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 50% 50% 0 50%; }
  .cmd.icon:after {
    left: 3px;
    top: -6px;
    width: 4px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 50% 50% 50% 0; }
  .cmd.icon i:before {
    left: -6px;
    top: 3px;
    width: 4px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 50% 0 50% 50%; }
  .cmd.icon i:after {
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 0 50% 50% 50%; }

.option.icon {
  margin-left: 3px;
  margin-top: 3px;
  width: 5px;
  height: 1px;
  background-color: #333333;
  box-shadow: 9px 0 0 0 #333333, 10px 14px 0 0 #333333; }
  .option.icon:before {
    height: 16px;
    width: 1px;
    background-color: #333333;
    left: 4px;
    transform-origin: right top;
    transform: rotate(-22.4deg); }

.shift.icon {
  margin-left: 6px;
  margin-top: 10px;
  width: 7px;
  height: 7px;
  border-left: solid 1px #333333;
  border-bottom: solid 1px #333333;
  border-right: solid 1px #333333; }
  .shift.icon:before {
    left: -2px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-left: solid 1px #333333;
    border-top: solid 1px #333333;
    transform: rotate(45deg); }
  .shift.icon:after {
    width: 4px;
    height: 1px;
    background-color: #333333;
    left: -4px;
    box-shadow: 11px 0 0 0 #333333; }

.hard-drive.icon {
  margin-left: 2px;
  margin-top: 10px;
  width: 15px;
  height: 6px;
  border-radius: 0 0 2px 2px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .hard-drive.icon:before {
    left: 4px;
    top: 0px;
    width: 5px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333; }
  .hard-drive.icon:after {
    top: 0px;
    width: 5px;
    height: 1px;
    background-color: #333333;
    box-shadow: 10px 0 0 0 #333333; }
  .hard-drive.icon i {
    width: 9px;
    height: 1px;
    background: #333333;
    left: 3px;
    top: -6px; }
    .hard-drive.icon i:before {
      top: -1px;
      left: -5px;
      width: 1px;
      height: 7px;
      border-right: solid 1px #333333;
      transform-origin: bottom center;
      transform: rotate(33deg); }
    .hard-drive.icon i:after {
      top: -1px;
      right: -4px;
      width: 1px;
      height: 7px;
      border-right: solid 1px #333333;
      transform-origin: bottom right;
      transform: rotate(-33deg); }
  .hard-drive.icon.filled {
    background-color: #333333; }
    .hard-drive.icon.filled:before {
      background-color: white; }

.terminal.icon {
  margin-left: 2px;
  margin-top: 3px;
  width: 15px;
  height: 13px;
  border: solid 1px #333333;
  border-radius: 1px; }
  .terminal.icon:before {
    top: 4px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    transform: rotate(-45deg); }
  .terminal.icon:after {
    width: 4px;
    height: 1px;
    background-color: #333333;
    left: 8px;
    top: 9px; }
  .terminal.icon.filled {
    background-color: #333333; }
    .terminal.icon.filled:before {
      border-color: white; }
    .terminal.icon.filled:after {
      background-color: white; }

.coffee-cup.icon {
  margin-left: 4px;
  margin-top: 5px;
  width: 11px;
  height: 8px;
  border: solid 1px #333333;
  border-radius: 0 0 3px 3px; }
  .coffee-cup.icon:before {
    top: 1px;
    right: -4px;
    width: 3px;
    height: 3px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-radius: 0 3px 3px 0; }
  .coffee-cup.icon:after {
    width: 15px;
    height: 1px;
    border-radius: 0 0 1px 1px;
    background-color: #333333;
    bottom: -3px;
    left: -2px; }
  .coffee-cup.icon.filled {
    background-color: #333333; }

.value-slider.icon {
  margin-top: 3px;
  margin-left: 13px;
  height: 13px;
  width: 1px;
  background-color: #333333;
  border-top: solid 1px #333333;
  border-right: solid 1px white;
  border-bottom: solid 1px #333333;
  border-left: solid 1px white; }
  .value-slider.icon:before {
    top: 3px;
    left: -12px;
    width: 15px;
    height: 5px;
    border: solid 1px #333333; }
  .value-slider.icon:after {
    left: -10px;
    top: 5px;
    width: 9px;
    height: 3px;
    background-color: #333333; }
  .value-slider.icon.filled:after {
    left: 1px;
    top: 4px;
    width: 3px;
    height: 5px; }

.headphone.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 11px;
  height: 7px;
  border-left: solid 1px #333333;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-radius: 6px 6px 0 0; }
  .headphone.icon:before {
    top: 6px;
    left: -3px;
    width: 2px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 2px 1px 1px 3px; }
  .headphone.icon:after {
    top: 6px;
    right: -3px;
    width: 2px;
    height: 4px;
    border: solid 1px #333333;
    border-radius: 1px 2px 3px 1px; }
  .headphone.icon.filled:before, .headphone.icon.filled:after {
    background-color: #333333; }

.infinite.icon {
  margin-left: 1px;
  margin-top: 7px;
  width: 18px;
  height: 7px; }
  .infinite.icon:before, .infinite.icon:after {
    width: 6px;
    height: 6px;
    border: solid 1px #333333;
    border-radius: 50% 50% 0 50%; }
  .infinite.icon:before {
    transform: rotate(-45deg); }
  .infinite.icon:after {
    transform: rotate(135deg);
    right: 0px; }

.crop.icon {
  margin-left: 5px;
  margin-top: 3px;
  width: 11px;
  height: 11px;
  border-left: solid 2px #333333;
  border-bottom: solid 2px #333333; }
  .crop.icon:before {
    left: -4px;
    top: 2px;
    width: 11px;
    height: 11px;
    border-right: solid 2px #333333;
    border-top: solid 2px #333333; }
  .crop.icon:after {
    width: 1px;
    height: 15px;
    background-color: #333333;
    bottom: -1px;
    left: -1px;
    transform-origin: bottom right;
    transform: rotate(45deg); }

.asterisk.icon {
  margin-left: 10px;
  margin-top: 5px;
  width: 1px;
  height: 11px;
  background-color: #333333; }
  .asterisk.icon:before, .asterisk.icon:after {
    width: 1px;
    height: 11px;
    background-color: #333333; }
  .asterisk.icon:before {
    transform: rotate(60deg); }
  .asterisk.icon:after {
    transform: rotate(-60deg); }

.pie-chart.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border: solid 1px #333333;
  border-radius: 50%; }
  .pie-chart.icon:before {
    left: 7px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-left: solid 1px #333333;
    border-bottom: solid 1px #333333; }
  .pie-chart.icon.filled {
    background-color: #333333; }
    .pie-chart.icon.filled:before {
      border-color: white; }

.bar-chart.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 16px;
  height: 12px;
  border-left: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .bar-chart.icon:before {
    left: 1px;
    bottom: 1px;
    width: 1px;
    height: 4px;
    border: solid 1px #333333; }
  .bar-chart.icon:after {
    left: 5px;
    bottom: 1px;
    width: 1px;
    height: 8px;
    border: solid 1px #333333; }
  .bar-chart.icon i {
    top: 11px;
    left: 8px; }
    .bar-chart.icon i:before {
      left: 1px;
      bottom: 0;
      width: 1px;
      height: 4px;
      border: solid 1px #333333; }
    .bar-chart.icon i:after {
      left: 5px;
      bottom: 0;
      width: 1px;
      height: 8px;
      border: solid 1px #333333; }

.bar-chart-filled.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 16px;
  height: 12px;
  border-left: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .bar-chart-filled.icon:before {
    left: 1px;
    bottom: 1px;
    width: 3px;
    height: 6px;
    background-color: #333333;
    box-shadow: 8px 0 0 0 #333333; }
  .bar-chart-filled.icon:after {
    left: 5px;
    bottom: 1px;
    width: 3px;
    height: 10px;
    background-color: #333333;
    box-shadow: 8px 0 0 0 #333333; }

.line-chart.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 16px;
  height: 12px;
  border-left: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .line-chart.icon:before {
    left: 1px;
    bottom: 1px;
    width: 0;
    height: 0;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 6px #333333; }
  .line-chart.icon:after {
    right: 0;
    bottom: 1px;
    width: 0;
    height: 0;
    border-left: solid 4px transparent;
    border-right: solid 4px transparent;
    border-bottom: solid 11px #333333; }

.toggle-button.icon {
  margin-left: 1px;
  margin-top: 5px;
  width: 17px;
  height: 10px;
  border-radius: 6px;
  border: solid 1px #333333; }
  .toggle-button.icon:before {
    left: 1px;
    top: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #333333; }
  .toggle-button.icon.filled {
    background-color: #333333; }
    .toggle-button.icon.filled:before {
      background-color: white; }

.filter.icon {
  margin-left: 3px;
  margin-top: 3px;
  width: 1px;
  height: 0;
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-top: solid 7px #333333; }
  .filter.icon:before {
    left: -1px;
    top: -5px;
    height: 7px;
    width: 0;
    border-top: solid 3px transparent;
    border-left: solid 3px #333333;
    border-bottom: solid 3px transparent; }

.play-button.icon {
  margin-left: 1px;
  margin-top: 5px;
  width: 17px;
  height: 10px;
  border-radius: 5px;
  border: solid 1px #333333; }
  .play-button.icon:before {
    left: 7px;
    top: 2px;
    height: 0;
    width: 0;
    border-top: solid 3px transparent;
    border-left: solid 5px #333333;
    border-bottom: solid 3px transparent; }
  .play-button.icon.filled {
    background-color: #333333; }
    .play-button.icon.filled:before {
      border-left: solid 5px white; }

.folder.icon {
  margin-left: 2px;
  margin-top: 6px;
  width: 15px;
  height: 10px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333;
  border-radius: 0 1px 1px 1px; }
  .folder.icon:before {
    left: -1px;
    top: -3px;
    width: 6px;
    height: 2px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333;
    border-top: solid 1px #333333;
    border-radius: 2px 3px 0 0; }
  .folder.icon:after {
    top: -1px;
    right: -1px;
    width: 9px;
    height: 1px;
    border-right: solid 1px #333333;
    border-top: solid 1px #333333;
    border-radius: 0 2px 0 0; }
  .folder.icon.filled {
    background-color: #333333; }
    .folder.icon.filled:before {
      background-color: #333333; }

.square-pin.icon {
  margin-left: 5px;
  margin-top: 3px;
  width: 11px;
  height: 8px;
  border-top: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .square-pin.icon:before {
    left: 2px;
    width: 5px;
    height: 8px;
    border-left: solid 1px #333333;
    border-right: solid 1px #333333; }
  .square-pin.icon:after {
    top: 9px;
    left: 5px;
    width: 1px;
    height: 5px;
    background-color: #333333; }
  .square-pin.icon.filled:before {
    background-color: #333333; }

.ruler.icon {
  margin-top: 7px;
  width: 19px;
  height: 5px;
  border-radius: 1px;
  border: solid 1px #333333;
  transform: rotate(-45deg); }
  .ruler.icon:before {
    top: -1px;
    left: 1px;
    width: 1px;
    height: 3px;
    background-color: #333333;
    box-shadow: 4px 0 0 0 #333333, 8px 0 0 0 #333333, 12px 0 0 0 #333333, 16px 0 0 0 #333333; }
  .ruler.icon:after {
    top: -1px;
    left: 3px;
    width: 1px;
    height: 4px;
    background-color: #333333;
    box-shadow: 4px 0 0 0 #333333, 8px 0 0 0 #333333, 12px 0 0 0 #333333; }
  .ruler.icon.filled {
    background-color: #333333; }
    .ruler.icon.filled:before {
      height: 2px;
      background-color: white;
      box-shadow: 4px 0 0 0 white, 8px 0 0 0 white, 12px 0 0 0 white, 16px 0 0 0 white; }
    .ruler.icon.filled:after {
      height: 3px;
      background-color: white;
      box-shadow: 4px 0 0 0 white, 8px 0 0 0 white, 12px 0 0 0 white; }

.piano.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 3px;
  height: 15px;
  border-radius: 0 0 2px 2px;
  border: solid 1px #333333; }
  .piano.icon:before, .piano.icon:after {
    width: 3px;
    height: 15px;
    border-radius: 0 0 2px 2px;
    border: solid 1px #333333; }
  .piano.icon:before {
    left: 3px;
    top: -1px; }
  .piano.icon:after {
    left: 7px;
    top: -1px; }
  .piano.icon i {
    left: 11px;
    top: -1px;
    width: 3px;
    height: 15px;
    border-radius: 0 0 2px 2px;
    border: solid 1px #333333;
    z-index: 1; }
    .piano.icon i:before {
      left: -2px;
      width: 3px;
      height: 8px;
      background-color: #333333;
      box-shadow: -4px 0 0 0 #333333, -8px 0 0 0 #333333; }
    .piano.icon i:after {
      left: -1px;
      width: 1px;
      height: 7px;
      background-color: white;
      box-shadow: -4px 0 0 0 white, -8px 0 0 0 white; }
  .piano.icon.filled i:after {
    display: none; }

.film.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 11px;
  height: 12px;
  border: solid 1px #333333; }
  .film.icon:before {
    left: -4px;
    top: -1px;
    width: 2px;
    height: 2px;
    background-color: #333333;
    box-shadow: 0 3px 0 0 #333333, 0 6px 0 0 #333333, 0 9px 0 0 #333333, 0 12px 0 0 #333333, 17px 0px 0 0 #333333, 17px 3px 0 0 #333333, 17px 6px 0 0 #333333, 17px 9px 0 0 #333333, 17px 12px 0 0 #333333; }
  .film.icon:after {
    left: 3px;
    top: 3px;
    width: 0;
    height: 0;
    border-left: solid 5px #333333;
    border-top: solid 3px transparent;
    border-bottom: solid 3px transparent; }
  .film.icon.filled {
    background-color: #333333; }
    .film.icon.filled:after {
      border-left: solid 5px white; }

.eyedropper.icon {
  margin-left: 8px;
  width: 2px;
  height: 19px;
  border: solid 1px #333333;
  border-radius: 2px;
  transform: rotate(45deg); }
  .eyedropper.icon:before {
    left: -1px;
    top: -1px;
    width: 4px;
    height: 7px;
    border-radius: 2px 2px 0 0;
    background-color: #333333; }
  .eyedropper.icon:after {
    left: -3px;
    top: 5px;
    width: 8px;
    height: 1px;
    background-color: #333333; }

.shop2.icon {
  margin-left: 4px;
  margin-top: 12px;
  width: 11px;
  height: 4px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .shop2.icon:before, .shop2.icon:after {
    top: -7px;
    width: 1px;
    height: 4px;
    border: solid 1px #333333; }
  .shop2.icon:before {
    left: -2px;
    border-radius: 4px 0 2px 2px; }
  .shop2.icon:after {
    right: -2px;
    border-radius: 0 4px 2px 2px; }
  .shop2.icon i {
    left: 3px;
    border: solid 1px #333333;
    width: 3px;
    height: 3px; }
    .shop2.icon i:before, .shop2.icon i:after {
      top: -10px;
      width: 1px;
      height: 6px;
      border: solid 1px #333333; }
    .shop2.icon i:before {
      left: -2px;
      border-radius: 3px 0 2px 2px; }
    .shop2.icon i:after {
      right: -2px;
      border-radius: 0 3px 2px 2px; }
  .shop2.icon.filled:before, .shop2.icon.filled:after,
  .shop2.icon.filled i:before,
  .shop2.icon.filled i:after {
    background-color: #333333; }

.shop.icon {
  margin-left: 4px;
  margin-top: 12px;
  width: 11px;
  height: 4px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .shop.icon:before, .shop.icon:after {
    top: -8px;
    width: 1px;
    height: 5px;
    border: solid 1px #333333; }
  .shop.icon:before {
    left: -2px;
    border-radius: 0 0 2px 2px; }
  .shop.icon:after {
    right: -2px;
    border-radius: 0 0 2px 2px; }
  .shop.icon i {
    left: 3px;
    border: solid 1px #333333;
    width: 3px;
    height: 3px; }
    .shop.icon i:before, .shop.icon i:after {
      top: -9px;
      width: 1px;
      height: 5px;
      border: solid 1px #333333; }
    .shop.icon i:before {
      left: -2px;
      border-radius: 0 0 2px 2px; }
    .shop.icon i:after {
      right: -2px;
      border-radius: 0 0 2px 2px; }

.shop-filled.icon {
  margin-left: 4px;
  margin-top: 12px;
  width: 11px;
  height: 4px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .shop-filled.icon:before {
    top: -8px;
    width: 3px;
    height: 7px;
    background-color: #333333;
    left: -2px;
    border-radius: 0 0 2px 2px;
    box-shadow: 4px 0 0 0 #333333, 8px 0 0 0 #333333, 12px 0 0 0 #333333; }
  .shop-filled.icon:after {
    left: 3px;
    border: solid 1px #333333;
    width: 3px;
    height: 3px; }

.music-note.icon {
  margin-left: 7px;
  margin-top: 4px;
  width: 9px;
  height: 8px;
  border-top: solid 3px #333333;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  transform: skewY(-11deg); }
  .music-note.icon:before, .music-note.icon:after {
    width: 5px;
    height: 4px;
    background-color: #333333;
    border-radius: 50%; }
  .music-note.icon:before {
    left: -5px;
    top: 6px; }
  .music-note.icon:after {
    left: 5px;
    top: 6px; }

.share.icon {
  margin-left: 4px;
  margin-top: 9px;
  width: 2px;
  height: 2px;
  border: solid 1px #333333;
  border-radius: 2px; }
  .share.icon:before, .share.icon:after {
    left: 9px;
    width: 2px;
    height: 2px;
    border: solid 1px #333333;
    border-radius: 2px; }
  .share.icon:before {
    top: -6px; }
  .share.icon:after {
    top: 4px; }
  .share.icon i:before {
    left: 3px;
    width: 8px;
    height: 1px;
    background-color: #333333;
    transform-origin: left bottom;
    transform: rotate(-30deg); }
  .share.icon i:after {
    top: 1px;
    left: 3px;
    width: 8px;
    height: 1px;
    background-color: #333333;
    transform-origin: left top;
    transform: rotate(30deg); }

.share-filled.icon {
  margin-left: 4px;
  margin-top: 9px;
  width: 4px;
  height: 4px;
  background-color: #333333;
  border-radius: 2px;
  box-shadow: 9px -5px 0 0 #333333, 9px 5px 0 0 #333333; }
  .share-filled.icon:before {
    top: 1px;
    left: 3px;
    width: 8px;
    height: 1px;
    background-color: #333333;
    transform-origin: left bottom;
    transform: rotate(-30deg); }
  .share-filled.icon:after {
    top: 2px;
    left: 3px;
    width: 8px;
    height: 1px;
    background-color: #333333;
    transform-origin: left top;
    transform: rotate(30deg); }

.house.icon {
  margin-left: 4px;
  margin-top: 9px;
  width: 11px;
  height: 9px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .house.icon:before {
    width: 3px;
    height: 5px;
    border: solid 1px #333333;
    left: 3px;
    top: 3px; }
  .house.icon:after {
    left: -1px;
    top: -4px;
    width: 12px;
    height: 12px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    transform: rotate(45deg); }
  .house.icon.filled:before {
    background-color: #333333; }

.insert2.icon {
  margin-left: 3px;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  border-bottom: solid 1px #333333;
  border-left: solid 1px #333333; }
  .insert2.icon:before {
    width: 4px;
    height: 1px;
    background-color: #333333; }
  .insert2.icon:after {
    width: 1px;
    height: 4px;
    background-color: #333333;
    right: 0;
    bottom: 0; }
  .insert2.icon i {
    width: 2px;
    height: 2px;
    border-bottom: solid 1px #333333;
    border-left: solid 1px #333333;
    left: 3px;
    bottom: 3px; }
    .insert2.icon i:before {
      width: 2px;
      height: 10px;
      border-top: solid 1px #333333;
      border-left: solid 1px #333333;
      border-right: solid 1px #333333;
      bottom: 2px;
      left: -1px;
      transform-origin: left bottom;
      transform: rotate(45deg); }
  .insert2.icon.filled i {
    width: 3px;
    height: 3px;
    background-color: #333333;
    left: 3px;
    bottom: 3px;
    border: none; }
    .insert2.icon.filled i:before {
      width: 4px;
      height: 11px;
      background-color: #333333;
      bottom: 3px;
      left: 0;
      transform-origin: left bottom;
      transform: rotate(45deg);
      border: none; }

.equalizer.icon {
  margin-left: 4px;
  margin-top: 3px;
  width: 1px;
  height: 15px;
  background-color: #333333;
  box-shadow: 6px 0 0 0 #333333, 12px 0 0 0 #333333; }
  .equalizer.icon:before {
    left: -1px;
    top: 2px;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background-color: #333333;
    box-shadow: 6px 8px 0 0 #333333, 12px 4px 0 0 #333333; }
  .equalizer.icon:after {
    top: 3px;
    width: 1px;
    height: 1px;
    background-color: white;
    box-shadow: 6px 8px 0 0 white, 12px 4px 0 0 white; }
  .equalizer.icon.filled:after {
    display: none; }

.video-camera.icon {
  margin-left: 1px;
  margin-top: 6px;
  width: 12px;
  height: 9px;
  border: solid 1px #333333;
  border-radius: 2px; }
  .video-camera.icon:before {
    right: -6px;
    width: 0;
    height: 1px;
    border-top: solid 4px transparent;
    border-bottom: solid 4px transparent;
    border-right: solid 6px #333333; }
  .video-camera.icon.filled {
    background-color: #333333; }

.back-play.icon {
  margin-left: 15px;
  margin-top: 4px;
  width: 1px;
  height: 13px;
  background-color: #333333; }
  .back-play.icon:before, .back-play.icon:after {
    left: -12px;
    width: 12px;
    height: 1px;
    background-color: #333333; }
  .back-play.icon:before {
    top: 0;
    transform-origin: right top;
    transform: rotate(-30deg); }
  .back-play.icon:after {
    bottom: 0;
    transform-origin: right bottom;
    transform: rotate(30deg); }

.back-play-filled.icon {
  margin-left: 5px;
  margin-top: 3px;
  width: 0;
  height: 0;
  border-right: solid 11px #333333;
  border-top: solid 7px transparent;
  border-bottom: solid 7px transparent; }

.play.icon {
  margin-left: 5px;
  margin-top: 4px;
  width: 1px;
  height: 13px;
  background-color: #333333; }
  .play.icon:before, .play.icon:after {
    left: 1px;
    width: 12px;
    height: 1px;
    background-color: #333333; }
  .play.icon:before {
    top: 0;
    transform-origin: left top;
    transform: rotate(30deg); }
  .play.icon:after {
    bottom: 0;
    transform-origin: left bottom;
    transform: rotate(-30deg); }

.play-filled.icon {
  margin-left: 5px;
  margin-top: 3px;
  width: 0;
  height: 0;
  border-left: solid 11px #333333;
  border-top: solid 7px transparent;
  border-bottom: solid 7px transparent; }

.pause.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 13px;
  height: 13px; }
  .pause.icon:before, .pause.icon:after {
    width: 3px;
    height: 11px;
    border: solid 1px #333333;
    border-radius: 1px; }
  .pause.icon:after {
    right: 0; }
  .pause.icon.filled:before, .pause.icon.filled:after {
    background-color: #333333; }

.stop-music.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 11px;
  height: 11px;
  border: solid 1px #333333;
  border-radius: 1px; }
  .stop-music.icon.filled {
    background-color: #333333; }

.backward.icon {
  margin-left: 4px;
  margin-top: 10px;
  transform: rotate(-45deg); }
  .backward.icon:before, .backward.icon:after {
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    border-radius: 1px 0 0 0; }
  .backward.icon:after {
    left: 3px;
    top: 3px; }

.backward-filled.icon {
  margin-left: 3px;
  margin-top: 4px;
  width: 14px;
  height: 14px; }
  .backward-filled.icon:before, .backward-filled.icon:after {
    width: 0;
    height: 0;
    border-right: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .backward-filled.icon:after {
    left: 7px; }

.forward.icon {
  margin-left: -1px;
  margin-top: 10px;
  transform: rotate(-45deg); }
  .forward.icon:before, .forward.icon:after {
    width: 9px;
    height: 9px;
    border-bottom: solid 1px #333333;
    border-right: solid 1px #333333;
    border-radius: 0 0 1px 0; }
  .forward.icon:after {
    left: 3px;
    top: 3px; }

.forward-filled.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 14px;
  height: 14px; }
  .forward-filled.icon:before, .forward-filled.icon:after {
    width: 0;
    height: 0;
    border-left: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .forward-filled.icon:after {
    left: 7px; }

.next.icon {
  margin-left: 6px;
  margin-top: 4px; }
  .next.icon:before {
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    border-radius: 0 1px 0 0;
    transform-origin: left top;
    transform: rotate(45deg); }
  .next.icon:after {
    left: 9px;
    top: 0px;
    width: 1px;
    height: 14px;
    background-color: #333333; }

.next-filled.icon {
  margin-left: 6px;
  margin-top: 4px;
  width: 14px;
  height: 14px; }
  .next-filled.icon:before {
    width: 0;
    height: 0;
    border-left: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .next-filled.icon:after {
    left: 7px;
    width: 3px;
    height: 14px;
    background-color: #333333; }

.previous.icon {
  margin-left: 5px;
  margin-top: 4px; }
  .previous.icon:before {
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    border-radius: 1px 0 0 0;
    transform-origin: right top;
    transform: rotate(-45deg); }
  .previous.icon:after {
    left: 0;
    top: 0;
    width: 1px;
    height: 14px;
    background-color: #333333; }

.previous-filled.icon {
  margin-left: 5px;
  margin-top: 4px;
  width: 14px;
  height: 14px; }
  .previous-filled.icon:before {
    left: 3px;
    width: 0;
    height: 0;
    border-right: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .previous-filled.icon:after {
    left: 0;
    width: 3px;
    height: 14px;
    background-color: #333333; }

.first.icon {
  margin-left: 3px;
  margin-top: 4px;
  width: 1px;
  height: 14px;
  background-color: #333333; }
  .first.icon:before {
    left: 0;
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    border-radius: 1px 0 0 0;
    transform-origin: right top;
    transform: rotate(-45deg); }
  .first.icon:after {
    left: 4px;
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    border-radius: 1px 0 0 0;
    transform-origin: right top;
    transform: rotate(-45deg); }

.first-filled.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 3px;
  height: 14px;
  background-color: #333333; }
  .first-filled.icon:before, .first-filled.icon:after {
    left: 3px;
    width: 0;
    height: 0;
    border-right: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .first-filled.icon:after {
    left: 10px; }

.last.icon {
  margin-left: 17px;
  margin-top: 4px;
  width: 1px;
  height: 14px;
  background-color: #333333; }
  .last.icon:before, .last.icon:after {
    left: -9px;
    width: 9px;
    height: 9px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    border-radius: 0 1px 0 0;
    transform-origin: left top;
    transform: rotate(45deg); }
  .last.icon:after {
    left: -13px; }

.last-filled.icon {
  margin-left: 16px;
  margin-top: 4px;
  width: 3px;
  height: 14px;
  background-color: #333333; }
  .last-filled.icon:before, .last-filled.icon:after {
    left: -7px;
    width: 0;
    height: 0;
    border-left: solid 7px #333333;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent; }
  .last-filled.icon:after {
    left: -14px; }

.record.icon {
  margin-left: 4px;
  margin-top: 4px;
  width: 11px;
  height: 11px;
  border: solid 1px #333333;
  border-radius: 50%; }
  .record.icon.filled {
    background-color: #333333; }

.previous-next.icon {
  margin-left: 8px;
  margin-top: 4px;
  width: 3px;
  height: 13px;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333; }
  .previous-next.icon:before {
    left: -10px;
    width: 8px;
    height: 8px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    transform-origin: right top;
    transform: rotate(-45deg); }
  .previous-next.icon:after {
    right: -10px;
    width: 8px;
    height: 8px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    transform-origin: left top;
    transform: rotate(45deg); }

.previous-next-filled.icon {
  margin-left: 2px;
  margin-top: 3px;
  width: 17px;
  height: 14px; }
  .previous-next-filled.icon:before {
    width: 0;
    height: 0;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent;
    border-right: solid 7px #333333; }
  .previous-next-filled.icon:after {
    left: 10px;
    width: 0;
    height: 0;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent;
    border-left: solid 7px #333333; }

.note-tree.icon {
  margin-left: 4px;
  margin-top: 10px;
  width: 11px;
  height: 5px;
  border-top: solid 1px #333333;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333; }
  .note-tree.icon:before {
    left: 5px;
    top: -6px;
    width: 1px;
    height: 11px;
    background-color: #333333; }
  .note-tree.icon:after {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #333333;
    left: -2px;
    top: 3px;
    box-shadow: 6px 0 0 0 #333333, 6px -10px 0 0 #333333, 12px 0 0 0 #333333; }

.layout-right-column.icon {
  margin-top: 2px;
  margin-left: 2px;
  width: 15px;
  height: 15px;
  border: solid 1px #333333;
  border-radius: 2px; }
  .layout-right-column.icon:before {
    left: -1px;
    top: 4px;
    width: 17px;
    height: 1px;
    background-color: #333333; }
  .layout-right-column.icon:after {
    left: 10px;
    top: 4px;
    width: 1px;
    height: 11px;
    background-color: #333333; }

.layout-right-column-filled.icon {
  margin-top: 2px;
  margin-left: 2px;
  width: 17px;
  height: 5px;
  background-color: #333333;
  border-radius: 2px 2px 0 0; }
  .layout-right-column-filled.icon:before {
    left: 0;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 0 0 0 2px;
    background-color: #333333; }
  .layout-right-column-filled.icon:after {
    left: 12px;
    top: 6px;
    width: 5px;
    height: 11px;
    background-color: #333333;
    border-radius: 0 0 2px 0; }

.layout-left-column.icon {
  margin-top: 2px;
  margin-left: 2px;
  width: 15px;
  height: 15px;
  border: solid 1px #333333;
  border-radius: 2px; }
  .layout-left-column.icon:before {
    left: -1px;
    top: 4px;
    width: 17px;
    height: 1px;
    background-color: #333333; }
  .layout-left-column.icon:after {
    left: 4px;
    top: 4px;
    width: 1px;
    height: 11px;
    background-color: #333333; }

.layout-left-column-filled.icon {
  margin-top: 2px;
  margin-left: 2px;
  width: 17px;
  height: 5px;
  background-color: #333333;
  border-radius: 2px 2px 0 0; }
  .layout-left-column-filled.icon:before {
    left: 0;
    top: 6px;
    width: 5px;
    height: 11px;
    border-radius: 0 0 0 2px;
    background-color: #333333; }
  .layout-left-column-filled.icon:after {
    left: 6px;
    top: 6px;
    width: 11px;
    height: 11px;
    background-color: #333333;
    border-radius: 0 0 2px 0; }

.layout-three-column.icon {
  margin-top: 4px;
  margin-left: 1px;
  width: 17px;
  height: 11px;
  border: solid 1px #333333;
  border-radius: 2px; }
  .layout-three-column.icon:before {
    top: -1px;
    left: 4px;
    width: 1px;
    height: 13px;
    background-color: #333333; }
  .layout-three-column.icon:after {
    top: -1px;
    right: 4px;
    width: 1px;
    height: 13px;
    background-color: #333333; }

.layout-three-column-filled.icon {
  margin-top: 4px;
  margin-left: 7px;
  width: 7px;
  height: 13px;
  background-color: #333333; }
  .layout-three-column-filled.icon:before, .layout-three-column-filled.icon:after {
    top: 0;
    width: 5px;
    height: 13px;
    background-color: #333333; }
  .layout-three-column-filled.icon:before {
    left: -6px;
    border-radius: 2px 0 0 2px; }
  .layout-three-column-filled.icon:after {
    right: -6px;
    border-radius: 0 2px 2px 0; }

.layout-1.icon {
  margin-left: 11px;
  margin-top: 2px;
  width: 6px;
  height: 15px;
  border-radius: 1px;
  border: solid 1px #333333; }
  .layout-1.icon:before, .layout-1.icon:after {
    left: -10px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    border: solid 1px #333333; }
  .layout-1.icon:before {
    top: -1px; }
  .layout-1.icon:after {
    bottom: -1px; }
  .layout-1.icon.filled {
    background-color: #333333; }
    .layout-1.icon.filled:before, .layout-1.icon.filled:after {
      background-color: #333333; }

.layout-2.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 6px;
  height: 15px;
  border-radius: 1px;
  border: solid 1px #333333; }
  .layout-2.icon:before, .layout-2.icon:after {
    right: -10px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    border: solid 1px #333333; }
  .layout-2.icon:before {
    top: -1px; }
  .layout-2.icon:after {
    bottom: -1px; }
  .layout-2.icon.filled {
    background-color: #333333; }
    .layout-2.icon.filled:before, .layout-2.icon.filled:after {
      background-color: #333333; }

.layout-3.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 15px;
  height: 6px;
  border-radius: 1px;
  border: solid 1px #333333; }
  .layout-3.icon:before, .layout-3.icon:after {
    bottom: -10px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    border: solid 1px #333333; }
  .layout-3.icon:before {
    left: -1px; }
  .layout-3.icon:after {
    right: -1px; }
  .layout-3.icon.filled {
    background-color: #333333; }
    .layout-3.icon.filled:before, .layout-3.icon.filled:after {
      background-color: #333333; }

.layout-4.icon {
  margin-left: 2px;
  margin-top: 11px;
  width: 15px;
  height: 6px;
  border-radius: 1px;
  border: solid 1px #333333; }
  .layout-4.icon:before, .layout-4.icon:after {
    top: -10px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    border: solid 1px #333333; }
  .layout-4.icon:before {
    left: -1px; }
  .layout-4.icon:after {
    right: -1px; }
  .layout-4.icon.filled {
    background-color: #333333; }
    .layout-4.icon.filled:before, .layout-4.icon.filled:after {
      background-color: #333333; }

.trophy.icon {
  margin-left: 3px;
  margin-top: 3px;
  width: 15px;
  height: 15px; }
  .trophy.icon:before {
    left: 3px;
    width: 7px;
    height: 9px;
    border: solid 1px #333333;
    border-radius: 0 0 5px 5px; }
  .trophy.icon:after {
    top: 11px;
    left: 7px;
    width: 1px;
    height: 4px;
    background-color: #333333; }
  .trophy.icon i {
    top: 14px;
    left: 4px;
    width: 7px;
    height: 1px;
    background-color: #333333; }
    .trophy.icon i:before {
      top: -12px;
      left: -4px;
      width: 2px;
      height: 4px;
      border: solid 1px #333333;
      border-radius: 0 0 0 3px; }
    .trophy.icon i:after {
      top: -12px;
      right: -4px;
      width: 2px;
      height: 4px;
      border: solid 1px #333333;
      border-radius: 0 0 3px 0; }
  .trophy.icon.filled:before {
    background-color: #333333; }

.speedmeter.icon {
  margin-left: 2px;
  margin-top: 4px;
  width: 15px;
  height: 9px;
  border-radius: 8px 8px 0 0;
  border-top: solid 1px #333333;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333; }
  .speedmeter.icon:before {
    left: 5px;
    top: 7px;
    width: 3px;
    height: 3px;
    border: solid 1px #333333;
    border-radius: 50%; }
  .speedmeter.icon:after {
    left: 7px;
    top: 3px;
    width: 1px;
    height: 5px;
    background-color: #333333; }
  .speedmeter.icon.filled:before {
    background-color: #333333; }

.shooting-target.icon {
  margin-left: 2px;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border: solid 1px #333333;
  border-radius: 50%; }
  .shooting-target.icon:before {
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border: solid 1px #333333;
    border-radius: 50%; }
  .shooting-target.icon:after {
    top: 5px;
    left: 5px;
    width: 3px;
    height: 3px;
    border: solid 1px #333333;
    border-radius: 50%; }
  .shooting-target.icon.filled {
    width: 13px;
    height: 13px;
    border: solid 2px #333333; }
    .shooting-target.icon.filled:before {
      left: 1px;
      top: 1px;
      width: 7px;
      height: 7px;
      border: solid 2px #333333; }
    .shooting-target.icon.filled:after {
      left: 4px;
      top: 4px;
      width: 5px;
      height: 5px;
      background-color: #333333;
      border: none; }

.clipboard.icon {
  margin-top: 4px;
  margin-left: 4px;
  width: 11px;
  height: 13px;
  border: solid 1px #333333;
  border-top: none;
  border-radius: 1px; }
  .clipboard.icon:before {
    top: -1px;
    left: 2px;
    width: 5px;
    height: 1px;
    border: solid 1px #333333;
    border-radius: 1px; }
  .clipboard.icon:after {
    width: 3px;
    height: 1px;
    background-color: #333333;
    box-shadow: 8px 0 0 0 #333333; }
  .clipboard.icon.filled {
    background-color: #333333; }
    .clipboard.icon.filled:before {
      background-color: white; }

.airplay.icon {
  margin-top: 4px;
  margin-left: 3px;
  width: 14px;
  height: 10px;
  border: solid 1px #333333;
  border-bottom: none;
  border-radius: 1px; }
  .airplay.icon:before {
    top: 7px;
    left: 3px;
    width: 0;
    height: 0;
    border-left: solid 4px transparent;
    border-right: solid 4px transparent;
    border-bottom: solid 5px #333333; }
  .airplay.icon:after {
    top: 9px;
    width: 3px;
    height: 1px;
    background-color: #333333;
    box-shadow: 11px 0 0 0 #333333; }
  .airplay.icon.filled {
    background-color: #333333; }
    .airplay.icon.filled:before {
      background-color: white; }

.reply.icon {
  margin-left: 5px;
  margin-top: 9px;
  width: 11px;
  height: 7px;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-radius: 0 6px 0 0; }
  .reply.icon:before {
    top: -4px;
    width: 6px;
    height: 6px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    transform: rotate(-45deg); }

.reply-all.icon {
  margin-left: 8px;
  margin-top: 9px;
  width: 8px;
  height: 7px;
  border-top: solid 1px #333333;
  border-right: solid 1px #333333;
  border-radius: 0 6px 0 0; }
  .reply-all.icon:before, .reply-all.icon:after {
    top: -4px;
    width: 6px;
    height: 6px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    transform: rotate(-45deg); }
  .reply-all.icon:after {
    left: -3px; }

.reply-all-reflect.icon {
  margin-left: 4px;
  margin-top: 9px;
  width: 8px;
  height: 7px;
  border-top: solid 1px #333333;
  border-left: solid 1px #333333;
  border-radius: 6px 0 0 0; }
  .reply-all-reflect.icon:before, .reply-all-reflect.icon:after {
    left: 1px;
    top: -4px;
    width: 6px;
    height: 6px;
    border-bottom: solid 1px #333333;
    border-right: solid 1px #333333;
    transform: rotate(-45deg); }
  .reply-all-reflect.icon:after {
    left: 4px; }

.forward-email.icon {
  margin-left: 4px;
  margin-top: 9px;
  width: 11px;
  height: 7px;
  border-top: solid 1px #333333;
  border-left: solid 1px #333333;
  border-radius: 6px 0 0 0; }
  .forward-email.icon:before {
    left: 4px;
    top: -4px;
    width: 6px;
    height: 6px;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    transform: rotate(45deg); }

.control.icon {
  margin-left: 9px;
  margin-top: 6px;
  width: 8px;
  height: 1px;
  background-color: #333333;
  box-shadow: -5px 8px 0 0 #333333; }
  .control.icon:before, .control.icon:after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: solid 1px #333333; }
  .control.icon:before {
    left: -6px;
    top: -3px; }
  .control.icon:after {
    right: -1px;
    top: 5px; }
  .control.icon.filled:before, .control.icon.filled:after {
    background-color: #333333; }

.cart.icon {
  margin-left: 5px;
  margin-top: 6px;
  width: 8px;
  height: 5px;
  border-top: solid 1px #333333;
  border-bottom: solid 1px #333333; }
  .cart.icon:before {
    width: 1px;
    height: 7px;
    background-color: #333333;
    bottom: -1px;
    transform-origin: left bottom;
    transform: rotate(-26deg); }
  .cart.icon:after {
    width: 1px;
    height: 10px;
    background-color: #333333;
    bottom: -1px;
    right: 0;
    transform-origin: right bottom;
    transform: rotate(23deg); }
  .cart.icon i {
    width: 3px;
    height: 1px;
    background-color: #333333;
    top: -1px;
    left: -3px;
    box-shadow: 10px 0 0 0 #333333, 14px -3px 0 0 #333333; }
    .cart.icon i:before, .cart.icon i:after {
      top: 8px;
      left: 1px;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      border: solid 1px #333333; }
    .cart.icon i:after {
      left: 9px; }

.cart-filled {
  margin-left: 2px;
  margin-top: 6px;
  width: 7px;
  height: 0;
  border-left: solid 3px transparent;
  border-right: solid 3px transparent;
  border-top: solid 7px #333333; }
  .cart-filled:before, .cart-filled:after {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #333333;
    top: 1px; }
  .cart-filled:before {
    left: -2px; }
  .cart-filled:after {
    left: 5px; }
  .cart-filled i {
    width: 3px;
    height: 1px;
    background-color: #333333;
    top: -10px;
    left: 10px; }
    .cart-filled i:before {
      height: 4px;
      width: 1px;
      background-color: #333333;
      transform-origin: left top;
      transform: rotate(21deg); }
